/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, 
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
                                     margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit;
                                     vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, progress {
                                     display: block; }
body {                               line-height: 1; }
ol, ul {                             list-style: none; }
blockquote, q {                      quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { 
                                     content: ''; content: none; }

/* remember to highlight inserts somehow! */
ins {                                text-decoration: none; }
del {                                text-decoration: line-through; }
table {                              border-collapse: collapse; border-spacing: 0; }

/*--------- TOOLS ---------*/
#drop-zone, .uploader, 
#drop-zone.active:after {            border-radius:5px;}

/*-*/
 .uploader {                    background:#f2f1f1;}

/*--------- LAYOUT ---------*/
::selection {                        background:rgba(0, 153, 255, 0.5); color:#fff;}
body {                               font:12px/16px Arial, sans-serif;}

#wrapper {                           margin:0 auto; padding:10px 0; width:240px;}
h1 {                                 margin:0 0 15px; font:bold 14px/18px Arial, Helvetica, sans-serif; color:#4a4a4a;}

#drop-zone {                         padding:0px; position:relative; background:#fff;  min-height:20px;}
#drop-text {                         margin:160px auto 0; padding:35px 0 0; padding:60px 0 0; background:#ececec; width:160px; 
                                     min-height:96px; text-align:center; border-radius:180px; 
                                     font: bold 30px/35px Helvetica, Arial, sans-serif; color:#dfdfdf; 
                                     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.8);}
#drop-zone.active:after {            content:''; display:block; height:100%; width:100%; position:absolute; top:0; left:0; 
                                     background:rgba(68, 164, 253, 0.58);}
                                     
/*--------- UPLOADERS ---------*/
.uploader {                          margin:0 0 15px; padding:10px; border:1px solid #e5e5e5; border-radius:5px; overflow:hidden;}
.uploader:last-child {               margin:0;}
.uploader > div {                    float:left;}
.file-preview {                      margin:0 10px 0 0;}
.file-preview > img {                border:2px solid #fff; width:100px; display:block;}
.file-name {                         margin-bottom:5px; font-size:11px; color:#333;}
.file-name > span {                  padding:0 0 0 5px; font-size:11px; color:#999; font-weight:normal; 
                                     text-shadow:0 1px 1px rgba(255,255,255,1);}
.state-success {                     color:#2a98ff;}
.state-error {                       color:#f00;}
.btn-cancel {                        color:#666; text-decoration:underline; display:block; float:left; clear:left;}

.progress-bar {                      margin:5px 5px 10px 0; background:#b8ddff; width:120px; border:1px solid #44a4fd; border-radius:5px;}
.progress-bar > div {                background:#44a4fd; height:5px; }
.progress-bar, .progress-percent {   float:left; line-height:16px;}
.progress-percent {                  font-size:11px; color:#2a98ff; }
/*body { background:#e3e3e3;}
#drop, #drop-files {       width: 700px; min-height:600px; margin:10px auto; background:#fff; border:7px dashed #f0f0f0; 
                      -moz-border-radius:10px; -webkit-border-radius:10px;}
#output {    width:700px; margin:10px auto; min-height:100px; background:#a7a24d;}
#output ul { margin-bottom:10px;}
.progress-bar-uploaded {background:red; height:10px;}
.progress-bar-wrap, .progress-bar { width:200px; height:10px; padding:1px; background:rgba(255, 0, 0, 0.2)}

.uploader { background:#f3f3f3; padding:10px 20px; overflow:hidden; margin-bottom:10px;}
.uploader .file-preview { float:left; display:inline-block; margin:0 10px 0 0; width:100px; padding:2px; background:#fff; 
                          -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.2);}
.uploader .file-preview img { display:block; max-width:100px; max-height:100px; margin: 0 auto;}
.uploader .file-metas { display:inline-block; width:450px;}
.uploader .file-name {  margin-bottom:10px;}
.state {                 }
.state-success {       color:#259f1c;}
.state-error {       color:#9f1c1c;}
.file-size {          font-size:11px;}
#drop-files.active { background:#ffcd77; border-color:#f89a2b;}*/
